<template>
  <v-chart class="h-[90%] w-[90%] m-auto mt-5" :option="option" :autoresize="true" />
</template>

<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart,ScatterChart  } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  MarkLineComponent,
  DataZoomComponent
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'
import { provide } from 'vue'
import { getChartOptions } from './chartOption'
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  ScatterChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  MarkLineComponent,
  DataZoomComponent
])

provide(THEME_KEY, 'light')
const { titleName, chartData } = defineProps(['titleName', 'chartData'])
const option = ref(getChartOptions(titleName, chartData))
watchEffect(() => {
  option.value = getChartOptions(titleName, chartData)
})
</script>

<style lang="scss" scoped></style>
